<template>
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-button-group style="margin-bottom: 20px">
        <el-button @click="openDrawer(false)">新增</el-button>
        <el-button @click="editSelected">编辑</el-button>
        <el-button @click="del">删除</el-button>
        <el-button @click="state(0)">启用</el-button>
        <el-button @click="state(1)">停用</el-button>
        <el-input
          placeholder="请输入故障编号或名称"
          clearable
          prefix-icon="el-icon-search"
          suffix-icon="el-icon-s-cale"
          style="width: 250px; margin-left: 573px"
          v-model="inputText"
        />
      </el-button-group>

      <el-table
        :data="equipmentData"
        style="width: 100%" 
        stripe 
        default-expand-all
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="efdName" label="故障条目名称" width="200" align="center"></el-table-column>
        <el-table-column prop="code" label="故障条目编码" width="200" align="center"></el-table-column>
        <el-table-column prop="deviceType.name" label="设备类型" width="200" align="center"></el-table-column>
        <el-table-column prop="efdCofId" label="故障类型" width="200" align="center"></el-table-column>
        <el-table-column prop="efdPartId" label="设备部位" width="200" align="center"></el-table-column>
        <el-table-column prop="sort" label="排序" width="100" align="center"></el-table-column>
        <el-table-column prop="efdState" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" effect="dark" v-if="scope.row.efdState == 0">启用</el-tag>
            <el-tag type="warning" effect="dark" v-if="scope.row.efdState == 1">禁用</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.efdState == 2">报废</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="故障描述" width="200" align="center"></el-table-column>
        <el-table-column prop="efdNotes" label="备注" align="center"></el-table-column>
      </el-table>
    </el-card>

    <el-drawer
      title="故障分类"
      :visible.sync="drawer"
      :with-header="false"
      size="35%"
    >
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span>{{ isEdit ? '编辑' : '新增' }}</span>
        </div>
        <el-form :model="form" label-width="120px" label-position="left" style="padding: 20px">

          <el-form-item label="故障经验编码" required>
            <el-input v-model="form.code"></el-input>
          </el-form-item>

          <el-form-item label="故障经验名称" required>
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="设备类型" required>
            <el-select v-model="form.equipmentId" placeholder="请选择" style="width: 322px">
              <el-option value="请选择">请选择</el-option>
              <el-option v-for="type in partLists" :key="type.id" :label="type.name" :value="type.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="故障类型" required>
            <el-select v-model="form.efdCofId" placeholder="请选择" style="width: 322px">
              <el-option value="请选择">请选择</el-option>
              <el-option v-for="type in getGz" :key="type.dictCode" :label="type.dictLabel" :value="type.dictLabel"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="设备部位" required>
            <el-select v-model="form.efdPartId" placeholder="请选择" style="width: 322px">
              <el-option value="请选择">请选择</el-option>
              <el-option v-for="type in partList" :key="type.dictCode" :label="type.dictLabel" :value="type.dictLabel"></el-option>
            </el-select>
          </el-form-item>
    
          <el-form-item label="状态" style="margin-left: 20px">
            <el-radio-group v-model="form.state">
              <el-radio label="0">启用</el-radio>
              <el-radio label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="故障描述" style="margin-left: 20px">
            <el-input type="textarea" v-model="form.description" cols="10px" rows="3px"></el-input>
          </el-form-item>

          <el-form-item label="备注" style="margin-left: 20px">
            <el-input type="textarea" v-model="form.notes" cols="10px" rows="3px"></el-input>
          </el-form-item>

          <el-form-item style="margin-left: 171px; margin-top: 92px">
            <el-button @click="handleCancel">取消</el-button>
            <el-button @click="handleSubmit">确认</el-button>
          </el-form-item>
          
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
// @ts-ignore
import { list, add, update, updatestate, deledf,getType } from "@/api/test/edf";
import { selectZi } from "@/api/eastjet-maintenance/type/type";

export default {
  data() {
    return {
      form: {
        name: "",
        code: "",
        sort: "",
        state: "",
        notes: "",
        description:"",
        tombstone: "1",
        id: "",
        faultCategory:"",
        efdCofId:"",
        efdPartId:"",
        equipmentId:""
      },
      drawer: false,
      isEdit: false,
      equipmentData: [],
      selectedRows: [], // 用于存储选中的行
      inputText: "",
      partList:[],
      partLists:[],
      getGz:[]
    };
  },
  created() {
    this.getList();
    this.getPart();
    this.getGztype();
    this.getParts();
  },
  watch: {
    inputText(newValue) {
      this.getList(); // 输入框内容变化时重新查询
    }
  },
  methods: {

    getParts()
    {
      console.log(1);
      var data="part"
      getType(data).then((res)=>{
      console.log("resgetParts:",res);
      this.partLists=res;
      console.log(this.partLists);

    })
   },

    getPart()
    {
     console.log(2);
      var data="part"
      selectZi(data).then((res)=>{
      console.log("resgetPart:",res);
      this.partList=res.data.data;
      console.log(this.partList);

    })
   },

   getGztype()
    {

      console.log(3);    
      var data="gz_type"
      selectZi(data).then((res)=>{
      console.log("resgetGztype:",res);
      this.getGz=res.data.data;
      console.log(this.getGztype);

    })
   },

    getList() {
      const data = {  
        page: 1,
        size: 10,
        condition: this.inputText // 使用输入框的内容作为条件
      };  
      list(data).then((res) => {
        console.log("listRes:",res);
        this.equipmentData = res.records;
      });
    },
    openDrawer(isEdit) {
      this.isEdit = isEdit;
      if (isEdit) {
        const selectedEquipment = this.selectedRows[0]; // 取第一个选中的设备
        if (selectedEquipment) {
          console.log("选中的行数据:", this.selectedRows);
          // 映射字段
          this.form = {
         name: selectedEquipment.efdName,
        code: selectedEquipment.code,
        sort: selectedEquipment.sort,
        state: selectedEquipment.efdState,
        notes: selectedEquipment.efdNotes,
        description:selectedEquipment.description,
        id:selectedEquipment.efdId,
        faultCategory:selectedEquipment.faultCategory,
        efdCofId:selectedEquipment.efdCofId,
        efdPartId:selectedEquipment.efdPartId,
        equipmentId:selectedEquipment.deviceType.id
        
          };
        } else {
          this.$message.warning("请先选择一个设备进行编辑");
          return;
        }
      } else {
        this.form = {  
           name: "",
        code: "",
        sort: "",
        state: "",
        notes: "",
        description:"",
        tombstone: "1",
        id: "",
        faultCategory:"",
        efdCofId:"",
        efdPartId:"",
        fid:"",
        equipmentId:""}; // 清空表单
      }
      this.drawer = true;
    },
    del() {

      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要删除的设备");
        return;
      }
      
      const idsToUpdate = this.selectedRows.map(row => row.efdId); // 提取选中项的 ftId
      this.dele(idsToUpdate);
    },
    
    dele(ids) {  
      const data = {  
        ids: ids  
      };  
      console.log("要删除的设备 ID 列表:", ids);  

      deledf(data).then((res) => {  
          console.log(res);  
          this.getList(); // 重新获取数据  
        })  
        .catch((error) => {  
          console.error("删除失败:", error);  
        });  
    },
    state(sta) {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要修改状态的设备");
        return;
      }
      
      const idsToUpdate = this.selectedRows.map(row => row.efdId); // 提取选中项的 ftId
      this.updateStates(sta, idsToUpdate);
      console.log("选中的行数据:", this.selectedRows);
      console.log("状态:", sta);
      console.log("要更新状态的设备 ID 列表:", idsToUpdate);
    },
    updateStates(sta, ids) {  
      const data = {  
        state: sta,  
        ids: ids  
      };  
      console.log("更新状态:", sta);  
      console.log("设备 ID 列表:", ids);  

      updatestate(data)  
        .then((res) => {  
          console.log(res);  
          this.getList(); // 重新获取数据  
        })  
        .catch((error) => {  
          console.error("更新失败:", error);  
        });  
    },
    editSelected() {
      if (this.selectedRows.length !== 1) {
        this.$message.warning("请只选择一个设备进行编辑");
        return;
      }
      this.openDrawer(true);
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新选中的行
    },
    handleCancel() {
      this.drawer = false;
    },
    handleSubmit() {
      if (this.isEdit) {
        this.updateForm();
      } else {
        this.resetForm();
      }
      this.drawer = false;
    },
    resetForm() {
      const formData = this.form;
      console.log("表单提交", this.form);
      add(formData).then((res) => {
        console.log(res);
        this.getList(); // 重新获取数据
        this.form = {}; // 根据您的表单数据结构进行调整
      }).catch((error) => {
        console.error("提交失败:", error);
      });
    },
    updateForm() {
      const formData = this.form;
      console.log("编辑提交", this.form);
      update( formData ).then((res) => {
        console.log(res);
        this.getList(); // 重新获取数据
      }).catch((error) => {
        console.error("更新失败:", error);
      });
    }
  },
};
</script>


<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1210px;
  height: 660px;
  margin-left: 14px;
}

.box-card2 {
  width: 526px;
  height: 749px;
  margin-left: 2px;
}
</style>